<!DOCTYPE html>
<html lang="zh">
<head>
    <title>注册</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../frame/asset/lib/layui/css/layui.css">
    <link rel="stylesheet" href="../frame/asset/css/common.css">
    <script src="../frame/asset/lib/jquery321.min.js"></script>
    <script src="../frame/asset/js/core.js"></script>
    <!-- 登录界面样式 -->
    <link rel="stylesheet" href="../frame/asset/css/login.css">
    <link rel="stylesheet" href="../frame/asset/css/admin.css">
    <link rel="stylesheet" href="../frame/asset/css/layer.css">
    <!-- END：登录界面样式 -->
</head>
<body class="layui-layout-body" layadmin-themealias="default">
<div class="layui-layout layui-layout-admin">
    <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login"
         style="display: none;padding: 20px 0; ">
        <div class="layadmin-user-login-main" style="width:600px;">
            <div class="layadmin-user-login-box layadmin-user-login-header">
                <h2>注册</h2>
                <p>您的所有信息我们会为您保密，请放心填写</p>
            </div>
            <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                        <fieldset class="layui-elem-field">
                            <legend>个人信息</legend>
                            <div class="layui-field-box">
                                <div class="layui-form-item">
                                    <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                                           for="LAY-user-reg-nickname"></label>
                                    <input autocomplete="off" type="text" name="nickname" id="LAY-user-reg-nickname"
                                           lay-verify="required"
                                           placeholder="昵称" class="layui-input">
                                </div>
                                <div class="layui-form-item">
                                    <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                                           for="LAY-user-reg-username"></label>
                                    <input autocomplete="off" type="text" name="username" id="LAY-user-reg-username"
                                           lay-verify="required"
                                           placeholder="登录名" class="layui-input">
                                </div>
                                <div class="layui-form-item">
                                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                                           for="LAY-user-reg-password"></label>
                                    <input autocomplete="off" type="password" name="password" id="LAY-user-reg-password"
                                           lay-verify="pass"
                                           placeholder="登录密码" class="layui-input">
                                </div>
                                <div class="layui-form-item">
                                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                                           for="LAY-user-reg-repass"></label>
                                    <input autocomplete="off" type="password" name="rePass" id="LAY-user-reg-repass"
                                           lay-verify="pass|rePass"
                                           placeholder="确认密码" class="layui-input">
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="layui-col-md6">
                        <fieldset class="layui-elem-field">
                            <legend>密码找回问题与答案，请注意填写</legend>
                            <div class="layui-field-box">
                                <div class="layui-form-item">
                                    <label class="layadmin-user-login-icon layui-icon layui-icon-read"
                                           for="LAY-user-reg-question"></label>
                                    <input autocomplete="off" type="text" name="question" id="LAY-user-reg-question"
                                           lay-verify="required"
                                           placeholder="找回密码问题" class="layui-input">
                                </div>
                                <div class="layui-form-item">
                                    <label class="layadmin-user-login-icon layui-icon layui-icon-read"
                                           for="LAY-user-reg-answer"></label>
                                    <input autocomplete="off" type="text" name="answer" id="LAY-user-reg-answer"
                                           lay-verify="required"
                                           placeholder="找回密码答案" class="layui-input">
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>

                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="user-reg-submit">注册
                    </button>
                </div>
                <div class="layui-trans layui-form-item layadmin-user-login-other">
                    <a href="login.html" class="layadmin-user-jump-change layadmin-link layui-hide-xs">已有账号，去登陆</a>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- 导入代码库文件 -->
<script src="../frame/asset/lib/layui/layui.js"></script>
<script src="../frame/asset/js/layui-elem.js"></script>
<!-- END：代码库文件 -->
<!-- ================================在这里编写页面的js代码================================ -->
<script>
    layui.use(['form', 'element', 'layer', 'laydate'], function () {
        var form = layui.form,
            element = layui.element,
            layer = layui.layer,
            laydate = layui.laydate;
        laydate.render({
            elem: '#LAY-user-reg-birthday' //指定元素
        });
        /**
         * 验证部分数据正确性
         **/
        form.verify({
            "pass": [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ],
            "rePass": function (value, item) { //value：表单的值、item：表单的DOM对象
                var pwd = $("#LAY-user-reg-password").val();
                if (value !== pwd) {
                    return "两次输入的密码不一致";
                }
            },
        });
        /**
         * 提交请求
         * */
        form.on('submit(user-reg-submit)', function (data) {
            /* 封装数据对象 */
            var user = {
                "nickname": data.field.nickname,
                "username": data.field.username,
                "password": data.field.password,
                "question": data.field.question,
                "answer": data.field.answer
            };
            util.httpRequest.post("../user/register", user, function (msg) {
                if (msg.code === 200) {
                    layer.msg('注册成功', {
                        offset: '100px'
                        , icon: 1
                        , time: 1000
                    });
                    setTimeout(function () {
                        window.location.href = "login.html";
                    }, 1000)
                } else {
                    layer.msg(msg.errorMessage, {
                        offset: '100px'
                        , icon: 2
                        , time: 2000
                    });
                }
            });
            return false;
        });
    });
</script>
<!-- ================================END:在这里编写页面的js代码================================ -->
</body>
</html>